<template>
    <div class="zw-page-box mt-40">
        <el-pagination
                background
                :page-sizes="[5, 10, 30, 50, 100]"
                :page-size="pageSize"
                :current-page="page"
                @size-change="sizeChange"
                @current-change="currentChange"
                @prev-click="currentChange"
                @next-click="currentChange"
                layout="total, prev, pager, next, sizes"
                v-show="total > 0"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'pageContent',
    data() {
        return {}
    },
    methods: {
        sizeChange (pageSize) {
            this.$emit('pageChange', 1, pageSize)
        },
        currentChange (val) {
            this.$emit('pageChange', val)
        }
    },
    props: {
        total: {
            required: true,
            type: Number
        },
        pageSize: {
            required: false,
            type: Number,
            default: 10
        },
        page: {
            required: true,
            type: Number,
            default: 1
        }
    }
}
</script>

<style scoped lang="less">
    .zw-page-box {
        margin-top: 10px;
        padding: 20px;
        text-align: center;
        background-color: #fff;
        border-radius: 5px;
    }
</style>
